<!--
 * @Author: 107w 8801453+lu-shangru@user.noreply.gitee.com
 * @Date: 2023-04-10 13:43:16
 * @LastEditors: 107w 8801453+lu-shangru@user.noreply.gitee.com
 * @LastEditTime: 2023-05-12 16:22:42
 * @Description:
 *
 * Copyright (c) 2023 by 107w, All Rights Reserved.
-->
<template>
  <!-- <i
    slot="reference"
    :style="isPlay == false ? '' : 'color: red;'"
    :class="isPlay == false ? 'el-icon-video-play' : 'el-icon-video-pause'"
    @click="autoPlay"
    style="
      cursor: pointer;
      margin-right: 10px;
      margin-top: 3px;
      font-size: 25px;
    "
  ></i> -->
  <span
    slot="reference"
    :style="isPlay == false ? '' : 'color: red;'"
    style="cursor: pointer; margin-right: 10px; margin-top: 3px"
    @click="autoPlay"
  >
    <!-- {{ isPlay == false ? '播放' : '暂停' }} -->
    <span
      v-if="isPlay == false"
      class="play"
    ><i class="el-icon-video-play" /> {{ $t('control.播放') }}</span>
    <span v-else class="play"><i class="el-icon-video-pause" /> {{ $t('control.暂停') }}</span>
  </span>
</template>

<script>
export default {
  name: 'Audioplay',
  props: {
    recordFile: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      isPlay: false,
      src: '',
      myAuto: new Audio(this.src)
    }
  },
  watch: {
    recordFile() {
      this.src = this.recordFile
      this.myAuto.pause()
      this.isPlay = false
      // this.palyEnd()
      this.myAuto = new Audio(this.src)
    }
  },
  created() {
    this.src = this.recordFile
    this.myAuto = new Audio(this.src)
  },
  methods: {
    autoPlay() {
      this.isPlay = !this.isPlay
      if (this.isPlay) {
        this.myAuto.play()
        this.palyEnd()
      } else {
        this.myAuto.pause()
        this.palyEnd()
      }
    },
    palyEnd() {
      this.myAuto.addEventListener('ended', () => {
        this.isPlay = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.play {
  display: inline-block;
  font-size: 14px;
  width: 62px;
  height: 28px;
  background-color: #f2f2f2;
  border-radius: 4px;
  line-height: 28px;
  text-align: center;
}
</style>

